import React, { useState } from 'react';
import ChildCom1 from "./ChildCom1"

function Memo() {

  const [counter1, setCounter1] = useState(1);
  const [counter2, setCounter2] = useState(1);

  console.log("Memo 渲染了");
  return (
    <div>
      <div>{counter1}</div>
      <button onClick={() => setCounter1(counter1 + 1)}>+1</button>
      <ChildCom1 counter={counter2} setCounter={setCounter2} />
    </div>
  );
}

export default Memo;

// 组件中定义了两个状态 *counter1* 和 *counter2*，在 *App* 组件内部修改 *counter1*，然后 *counter2* 作为 *porps* 传递给子组件，此时我们修改 *counter1* 的状态时，子组件也会跟着更新，原因很简单，因为父组件更新了，那你子组件当然要重新更新。

// 但是，我们发现，其实**<u>子组件的更新是没有必要的，因为传递给子组件的 *props* 并没有发生变化</u>**，此时我们就可以使用 *React.memo*，如下：
